<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { i18n } from 'boot/i18n'
import { date, Notify, QSpinnerBall } from 'quasar'
import api from 'src/api'
import type { MeetingReservation } from 'src/api/service'
import { useRoute } from 'vue-router'

const route = useRoute()
const tc = i18n.global.tc

// 视图模式：日历/列表
const viewMode = ref('calendar')

// 日历视图设置
const calendarView = ref('month') // 月视图/周视图/日视图
const currentDate = ref(new Date())

// 自定义日历数据
const calendarDays = computed(() => {
  // 获取当前月的第一天
  const firstDay = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1)
  // 获取当前月的最后一天
  const lastDay = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 0)

  const daysInMonth = lastDay.getDate()
  const firstDayOfWeek = firstDay.getDay() // 0 是周日，1 是周一，以此类推

  // 创建日历网格
  const days = []

  // 添加上个月的日期填充第一周
  const prevMonthLastDay = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 0).getDate()
  for (let i = 0; i < firstDayOfWeek; i++) {
    days.push({
      date: new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, prevMonthLastDay - firstDayOfWeek + i + 1),
      isCurrentMonth: false
    })
  }

  // 当前月的日期
  for (let i = 1; i <= daysInMonth; i++) {
    days.push({
      date: new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), i),
      isCurrentMonth: true
    })
  }

  // 添加下个月的日期填充最后一周
  const remainingDays = 42 - days.length // 保持6行7列的固定布局
  for (let i = 1; i <= remainingDays; i++) {
    days.push({
      date: new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, i),
      isCurrentMonth: false
    })
  }

  return days
})

// 获取某一天的会议事件
const getEventsForDay = (day: Date) => {
  const dateString = date.formatDate(day, 'YYYY-MM-DD')
  return calendarEvents.value.filter(event =>
    event.start.substring(0, 10) === dateString
  )
}

// 获取周视图数据
const weekViewDays = computed(() => {
  const currentWeekStart = new Date(currentDate.value)
  const day = currentWeekStart.getDay() // 0 是周日，1 是周一，以此类推
  currentWeekStart.setDate(currentWeekStart.getDate() - day) // 设置为当前周的周日

  const days = []
  for (let i = 0; i < 7; i++) {
    const day = new Date(currentWeekStart)
    day.setDate(day.getDate() + i)
    days.push(day)
  }

  return days
})

// 获取日视图的24小时时间段
const dayViewHours = computed(() => {
  const hours = []
  for (let i = 0; i < 24; i++) {
    hours.push(i)
  }
  return hours
})

// 获取当天的事件
const getDayEvents = () => {
  const dateString = date.formatDate(currentDate.value, 'YYYY-MM-DD')
  return calendarEvents.value.filter(event =>
    event.start.substring(0, 10) === dateString
  )
}

// 检查日期是否是今天
const isToday = (day: Date) => {
  const today = new Date()
  return day.getDate() === today.getDate() &&
    day.getMonth() === today.getMonth() &&
    day.getFullYear() === today.getFullYear()
}

// 格式化日期函数 (使用 API 返回的时间戳)
const formatDate = (timestamp: number) => {
  if (!timestamp) return ''
  return date.formatDate(timestamp * 1000, 'YYYY-MM-DD HH:mm')
}

// 当前月份标题
const currentMonthTitle = computed(() => {
  const month = date.formatDate(currentDate.value, 'MMMM')
  const year = date.formatDate(currentDate.value, 'YYYY')
  return `${month} ${year}`
})

// 会议数据
const meetings = ref<MeetingReservation[]>([]) // 使用 API 类型
const loadingMeetings = ref(false)

// 获取会议列表
const fetchMeetings = async () => {
  loadingMeetings.value = true
  try {
    // 暂时不加筛选参数，获取所有（或后端默认处理权限）
    const response = await api.service.txMeeting.listReservations()
    meetings.value = response.data.results || []
  } catch (error) {
    console.error('Error fetching reservations:', error)
    Notify.create({
      message: tc('获取预定列表失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
    meetings.value = [] // 出错时清空列表
  } finally {
    loadingMeetings.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchMeetings()

  // 监听URL参数来设置视图模式
  if (route.query.view === 'calendar') {
    viewMode.value = 'calendar'
  } else if (route.query.view === 'list') {
    viewMode.value = 'list'
  }
})

// 监听路由参数变化
watch(
  () => route.query,
  (query) => {
    if (query.view === 'calendar') {
      viewMode.value = 'calendar'
    } else if (query.view === 'list') {
      viewMode.value = 'list'
    }
  }
)

// 日历事件数据
const calendarEvents = computed(() => {
  return meetings.value.map((meeting: MeetingReservation) => {
    const now = new Date()
    const meetingEndTime = new Date(meeting.end_time * 1000)

    // 检查会议是否已过期
    const isExpired = meetingEndTime < now && meeting.status === 'reserved'

    let bgColor = 'primary'
    let statusText = ''
    let iconName = ''

    if (meeting.status === 'cancelled') {
      bgColor = 'grey'
      statusText = ' - ' + tc('已取消')
      iconName = 'cancel'
    } else if (isExpired) {
      bgColor = 'grey'
      statusText = ' - ' + tc('已过期')
      iconName = 'schedule'
    }

    return {
      id: meeting.id,
      title: meeting.subject + statusText,
      start: date.formatDate(meeting.start_time * 1000, 'YYYY-MM-DDTHH:mm:ss'), // 日历需要 ISO 格式
      end: date.formatDate(meeting.end_time * 1000, 'YYYY-MM-DDTHH:mm:ss'),
      bgcolor: bgColor,
      icon: iconName,
      isExpired,
      isCancelled: meeting.status === 'cancelled'
    }
  })
})

// 上一个月/周/日
const goToPrev = () => {
  const d = new Date(currentDate.value)
  if (calendarView.value === 'month') {
    d.setMonth(d.getMonth() - 1)
  } else if (calendarView.value === 'week') {
    d.setDate(d.getDate() - 7)
  } else {
    d.setDate(d.getDate() - 1)
  }
  currentDate.value = d
}

// 下一个月/周/日
const goToNext = () => {
  const d = new Date(currentDate.value)
  if (calendarView.value === 'month') {
    d.setMonth(d.getMonth() + 1)
  } else if (calendarView.value === 'week') {
    d.setDate(d.getDate() + 7)
  } else {
    d.setDate(d.getDate() + 1)
  }
  currentDate.value = d
}

// 返回今天
const goToToday = () => {
  currentDate.value = new Date()
}

// 当前选中的会议
const selectedMeeting = ref<MeetingReservation | null>(null)
const selectedMeetingOpen = ref(false)
const loadingMeetingDetails = ref(false)

// 关闭会议详情
const closeMeetingDetails = () => {
  selectedMeetingOpen.value = false
  selectedMeeting.value = null
}

// 显示会议详情 (调用 API)
const showMeetingDetails = async (meetingId: string) => {
  loadingMeetingDetails.value = true
  selectedMeetingOpen.value = true
  selectedMeeting.value = null
  try {
    const response = await api.service.txMeeting.getReservationDetail(meetingId)
    selectedMeeting.value = response.data
  } catch (error) {
    console.error('Error fetching meeting details:', error)
    Notify.create({
      message: tc('获取会议详情失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
    closeMeetingDetails()
  } finally {
    loadingMeetingDetails.value = false
  }
}

// 设置通知时间
const settingNoticeTime = ref(false)
const setNoticeTime = async (meetingId: string, advanceMinutes: number) => {
  if (!meetingId || settingNoticeTime.value) return
  settingNoticeTime.value = true
  const dismiss = Notify.create({
    message: tc('正在设置提醒时间...'),
    type: 'ongoing',
    spinner: QSpinnerBall,
    position: 'center',
    timeout: 0
  })
  try {
    await api.service.txMeeting.setReservationNoticeTime(meetingId, advanceMinutes)
    dismiss()
    Notify.create({
      message: tc('提醒时间设置成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
    // 更新本地数据中的秒数
    if (selectedMeeting.value && selectedMeeting.value.id === meetingId) {
      selectedMeeting.value.advance_notice_seconds = advanceMinutes * 60
    }
    // 同时更新列表中的数据
    const meetingInList = meetings.value.find(m => m.id === meetingId)
    if (meetingInList) {
      meetingInList.advance_notice_seconds = advanceMinutes * 60
    }
  } catch (error) {
    dismiss()
    console.error('Error setting notice time:', error)
    Notify.create({
      message: tc('设置提醒时间失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    settingNoticeTime.value = false
  }
}

// 取消会议预定
const cancellingBooking = ref(false)
const cancelBooking = async () => {
  if (!selectedMeeting.value || cancellingBooking.value) return

  const meetingId = selectedMeeting.value.id
  cancellingBooking.value = true
  const dismiss = Notify.create({
    message: tc('正在取消预定...'),
    type: 'ongoing',
    spinner: QSpinnerBall,
    position: 'center',
    timeout: 0
  })

  try {
    await api.service.txMeeting.cancelReservation(meetingId)
    dismiss()
    Notify.create({
      message: tc('会议预定已取消'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
    // 更新本地状态
    const index = meetings.value.findIndex(m => m.id === meetingId)
    if (index !== -1) {
      meetings.value[index].status = 'cancelled'
    }
    closeMeetingDetails()
  } catch (error) {
    dismiss()
    console.error('Error cancelling reservation:', error)
    Notify.create({
      message: tc('取消预定失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    cancellingBooking.value = false
  }
}

// 计算当前选中会议的状态显示
const selectedMeetingStatus = computed(() => {
  if (!selectedMeeting.value) return { color: 'grey', text: '' }

  if (selectedMeeting.value.status === 'cancelled') {
    return { color: 'grey', text: tc('已取消') }
  }

  const now = new Date()
  const meetingEndTime = new Date(selectedMeeting.value.end_time * 1000)
  if (meetingEndTime < now) {
    return { color: 'grey', text: tc('已过期') }
  }

  return { color: 'positive', text: tc('已预定') }
})
</script>

<template>
  <q-scroll-area style="height: calc(100vh - 50px)">
    <div class="q-pa-md">
      <h5 class="q-mt-none q-mb-md">{{ tc('我的预定') }}</h5>

      <!-- 视图切换 -->
      <div class="row items-center q-mb-md">
        <div class="col">
          <q-btn-toggle v-model="viewMode" toggle-color="primary" :options="[
            { label: tc('日历视图'), value: 'calendar' },
            { label: tc('列表视图'), value: 'list' }
          ]" dense unelevated />
        </div>
      </div>

      <!-- Loading skeleton -->
      <q-card v-if="loadingMeetings">
        <q-card-section>
          <q-skeleton type="rect" height="50px" class="q-mb-md" />
          <q-skeleton type="rect" height="300px" />
        </q-card-section>
      </q-card>

      <!-- Content -->
      <div v-else>
        <!-- 日历视图 -->
        <div v-if="viewMode === 'calendar'">
          <q-card>
            <q-card-section>
              <!-- 日历工具栏 -->
              <div class="row items-center q-mb-md">
                <div class="col-auto">
                  <q-btn-group flat>
                    <q-btn :label="tc('上一个')" icon="chevron_left" flat @click="goToPrev" />
                    <q-btn :label="tc('今天')" flat @click="goToToday" />
                    <q-btn :label="tc('下一个')" icon-right="chevron_right" flat @click="goToNext" />
                  </q-btn-group>
                </div>

                <div class="col text-center text-h6">
                  {{ currentMonthTitle }}
                </div>

                <div class="col-auto">
                  <q-btn-toggle v-model="calendarView" toggle-color="primary" :options="[
                    { label: tc('月'), value: 'month' },
                    { label: tc('周'), value: 'week' },
                    { label: tc('日'), value: 'day' }
                  ]" dense unelevated />
                </div>
              </div>

              <!-- 日历组件 -->
              <div v-if="calendarView === 'month'" class="custom-calendar">
                <!-- 日历头部，显示星期 -->
                <div class="calendar-header">
                  <div class="calendar-cell">{{ tc('日') }}</div>
                  <div class="calendar-cell">{{ tc('一') }}</div>
                  <div class="calendar-cell">{{ tc('二') }}</div>
                  <div class="calendar-cell">{{ tc('三') }}</div>
                  <div class="calendar-cell">{{ tc('四') }}</div>
                  <div class="calendar-cell">{{ tc('五') }}</div>
                  <div class="calendar-cell">{{ tc('六') }}</div>
                </div>

                <!-- 日历主体 -->
                <div class="calendar-body">
                  <div v-for="(day, index) in calendarDays" :key="index" class="calendar-cell" :class="{
                    'other-month': !day.isCurrentMonth,
                    'today': isToday(day.date)
                  }">
                    <div class="day-number">{{ day.date.getDate() }}</div>
                    <div class="day-events">
                      <div v-for="event in getEventsForDay(day.date)" :key="event.id"
                        class="calendar-event q-px-sm q-py-xs" :class="`bg-${event.bgcolor}`"
                        @click="showMeetingDetails(event.id)">
                        {{ event.title }}
                        <q-icon v-if="event.icon" :name="event.icon" size="xs" class="q-ml-xs" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else-if="calendarView === 'week'" class="custom-calendar-week">
                <!-- 周视图 -->
                <div class="week-header">
                  <div v-for="(day, index) in weekViewDays" :key="index" class="week-day-header"
                    :class="{ 'today': isToday(day) }">
                    <div class="day-name">{{ date.formatDate(day, 'ddd') }}</div>
                    <div class="day-number">{{ date.formatDate(day, 'D') }}</div>
                  </div>
                </div>

                <div class="week-body">
                  <div v-for="(day, index) in weekViewDays" :key="index" class="week-column">
                    <div class="week-events">
                      <div v-for="event in getEventsForDay(day)" :key="event.id" class="calendar-event q-px-sm q-py-xs"
                        :class="`bg-${event.bgcolor}`" @click="showMeetingDetails(event.id)">
                        {{ event.title }}
                        <q-icon v-if="event.icon" :name="event.icon" size="xs" class="q-ml-xs" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else class="custom-calendar-day">
                <!-- 日视图 -->
                <div class="day-header">
                  <div class="day-title" :class="{ 'today': isToday(currentDate) }">
                    {{ date.formatDate(currentDate, 'dddd, MMMM D, YYYY') }}
                  </div>
                </div>

                <div class="day-body">
                  <div v-for="hour in dayViewHours" :key="hour" class="hour-row">
                    <div class="hour-label">{{ hour }}:00</div>
                    <div class="hour-events">
                      <div v-for="event in getDayEvents().filter(e =>
                        parseInt(e.start.substring(11, 13)) === hour
                      )" :key="event.id" class="calendar-event q-px-sm q-py-xs" :class="`bg-${event.bgcolor}`"
                        @click="showMeetingDetails(event.id)">
                        {{ event.title }} ({{ event.start.substring(11, 16) }} - {{ event.end.substring(11, 16) }})
                        <q-icon v-if="event.icon" :name="event.icon" size="xs" class="q-ml-xs" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>

        <!-- 列表视图 -->
        <div v-else>
          <q-card>
            <q-card-section>
              <q-table bordered flat :rows="meetings" :columns="[
                { name: 'subject', label: tc('会议主题'), field: 'subject', align: 'left', sortable: true },
                {
                  name: 'start_time',
                  label: tc('开始时间'),
                  field: 'start_time',
                  format: val => formatDate(val),
                  align: 'left',
                  sortable: true
                },
                {
                  name: 'end_time',
                  label: tc('结束时间'),
                  field: 'end_time',
                  format: val => formatDate(val),
                  align: 'left',
                  sortable: true
                },
                { name: 'tx_meeting_code', label: tc('会议号'), field: 'tx_meeting_code', align: 'left' }, // 使用 tx_meeting_code
                { name: 'room_type', label: tc('会议室类型'), field: 'room_type', format: val => `${val}方`, align: 'left' }, // 显示 xx方
                {
                  name: 'status',
                  label: tc('状态'),
                  field: 'status',
                  align: 'left',
                  format: (val, row) => {
                    if (val === 'cancelled') return tc('已取消')

                    const now = new Date()
                    const meetingEndTime = new Date(row.end_time * 1000)
                    if (meetingEndTime < now && val === 'reserved') {
                      return tc('已过期')
                    }

                    switch (val) {
                      case 'reserved': return tc('已预定');
                      default: return val;
                    }
                  }
                },
                {
                  name: 'actions',
                  label: tc('操作'),
                  field: 'id',
                  align: 'center'
                }
              ]" row-key="id" separator="horizontal" :pagination="{ rowsPerPage: 10 }" :loading="loadingMeetings">
                <template v-slot:body-cell-actions="props">
                  <q-td :props="props">
                    <q-btn flat dense round icon="visibility" @click="showMeetingDetails(props.row.id)">
                      <q-tooltip>{{ tc('查看详情') }}</q-tooltip>
                    </q-btn>
                    <!-- Add other actions like cancel/edit based on status -->
                  </q-td>
                </template>
              </q-table>
            </q-card-section>
          </q-card>
        </div>
      </div>

      <!-- 会议详情 Dialog -->
      <q-dialog v-model="selectedMeetingOpen" persistent @hide="closeMeetingDetails">
        <q-card style="min-width: 450px">
          <q-card-section class="row items-center">
            <div class="text-h6">{{ selectedMeeting?.subject || '&nbsp;' }}</div>
            <q-space></q-space>
            <q-btn icon="close" flat round dense v-close-popup></q-btn>
          </q-card-section>

          <q-separator />

          <!-- 加载状态 -->
          <q-card-section v-if="loadingMeetingDetails">
            <q-inner-loading showing>
              <q-spinner-gears size="50px" color="primary" />
            </q-inner-loading>
            <div style="height: 300px;"></div>
          </q-card-section>

          <q-card-section v-else-if="selectedMeeting">
            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('会议号') }}</div>
              <div>{{ selectedMeeting.tx_meeting_code }}</div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('预定时间') }}</div>
              <div>{{ formatDate(selectedMeeting.start_time) }} - {{ formatDate(selectedMeeting.end_time) }}</div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('会议室实际预留时间') }}</div>
              <div>{{ formatDate(selectedMeeting.room_reserve_start) }} - {{
                formatDate(selectedMeeting.room_reserve_end) }}
              </div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('会议室类型') }}</div>
              <div>{{ selectedMeeting.room_type }}方</div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('预定人') }}</div>
              <div>{{ selectedMeeting.user?.full_name }} ({{ selectedMeeting.user?.username }})</div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('预定状态') }}</div>
              <q-chip :color="selectedMeetingStatus.color" text-color="white" dense square>
                {{ selectedMeetingStatus.text }}
              </q-chip>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('会议室预留状态') }}</div>
              <q-chip
                :color="selectedMeeting.room_reserve_status === 'reserved' ? 'positive' : selectedMeeting.room_reserve_status === 'wait' ? 'warning' : 'negative'"
                text-color="white" dense square>
                {{ selectedMeeting.room_reserve_status === 'wait' ? tc('待预留') :
                  selectedMeeting.room_reserve_status === 'unreserved' ? tc('预留失败') :
                    selectedMeeting.room_reserve_status === 'reserved' ? tc('已预留') :
                      selectedMeeting.room_reserve_status === 'unreleased' ? tc('释放失败') :
                        selectedMeeting.room_reserve_status === 'released' ? tc('已释放') : selectedMeeting.room_reserve_status }}
              </q-chip>
              <div v-if="selectedMeeting.room_reserve_desc" class="text-caption text-negative q-mt-xs">{{
                selectedMeeting.room_reserve_desc }}</div>
            </div>

            <div class="q-mb-sm">
              <div class="text-subtitle2">{{ tc('腾讯会议加入链接') }}</div>
              <div>
                <a :href="selectedMeeting.tx_join_url" target="_blank" class="text-primary">{{
                  selectedMeeting.tx_join_url
                  }}</a>
              </div>
            </div>

            <!-- 添加通知时间设置 -->
            <div class="q-mt-md">
              <div class="text-subtitle2 q-mb-xs">{{ tc('会前提醒时间') }}</div>
              <q-select dense outlined :model-value="selectedMeeting.advance_notice_seconds / 60"
                @update:model-value="val => setNoticeTime(selectedMeeting?.id || '', val)"
                :options="[15, 30, 60, 180, 480, 1440, 2880, 4320]" :option-label="opt => `${opt} ${tc('分钟')}`"
                :disable="selectedMeeting.status !== 'reserved' || settingNoticeTime" :loading="settingNoticeTime" />
            </div>

          </q-card-section>

          <q-separator />

          <q-card-actions align="right">
            <!--<q-btn
              :label="tc('修改预定')"
              color="primary"
              :disable="selectedMeeting?.status !== 'reserved'"
            ></q-btn>-->
            <q-btn :label="tc('取消预定')" color="negative"
              :disable="selectedMeeting?.status !== 'reserved' || cancellingBooking" :loading="cancellingBooking"
              @click="cancelBooking"></q-btn>
            <q-btn :label="tc('关闭')" color="grey" v-close-popup @click="closeMeetingDetails"></q-btn>
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </q-scroll-area>
</template>

<style lang="scss" scoped>
.calendar-event {
  margin: 2px 0;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &.bg-grey {
    opacity: 0.7;
    // text-decoration: line-through;
    color: #666 !important;
    background-color: #bdbdbd !important;
  }
}

/* 自定义日历样式 */
.custom-calendar {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
}

.calendar-body {
  display: flex;
  flex-wrap: wrap;
}

.calendar-cell {
  width: calc(100% / 7);
  height: 100px;
  border: 1px solid #eee;
  padding: 5px;
  position: relative;
  background-color: white;
}

.calendar-header .calendar-cell {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-number {
  font-weight: bold;
  margin-bottom: 5px;
}

.other-month {
  color: #aaa;
  background-color: #f9f9f9;
}

.today {
  background-color: #e3f2fd;
}

.day-events {
  max-height: 65px;
  overflow-y: auto;
}

/* 周视图样式 */
.custom-calendar-week {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.week-header {
  display: flex;
  background-color: #f5f5f5;
}

.week-day-header {
  width: calc(100% / 7);
  padding: 10px;
  text-align: center;
  border: 1px solid #eee;
}

.day-name {
  font-weight: bold;
}

.week-body {
  display: flex;
  height: 400px;
}

.week-column {
  width: calc(100% / 7);
  border: 1px solid #eee;
  padding: 5px;
  position: relative;
  background-color: white;
}

.week-events {
  height: 100%;
  overflow-y: auto;
}

/* 日视图样式 */
.custom-calendar-day {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.day-header {
  padding: 10px;
  text-align: center;
  background-color: #f5f5f5;
  font-weight: bold;
}

.day-body {
  height: 600px;
  overflow-y: auto;
}

.hour-row {
  display: flex;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.hour-label {
  width: 60px;
  padding: 5px;
  text-align: right;
  color: #666;
}

.hour-events {
  flex: 1;
  padding: 5px;
  border-left: 1px solid #eee;
}
</style>
